<template>
    <div class="main-box">
        <div class="title">角色管理</div>
        <div class="operation">
            <div class="role-operation">
                <div class="left-bar">
                    <el-button type="primary" @click="showRoleDialog">
                        <i class="iconfont icon-jiahao"></i>
                        <span>新增</span>
                    </el-button>
                    <el-button @click="deleteBatchRole" :disabled="selectedRoleIds.length == 0" type="danger">
                        <i class="iconfont icon-jiahao"></i>
                        <span>批量删除</span>
                    </el-button>
                </div>
                <div style="margin-left: auto;">
                    <el-form ref="queryFormRef" :model="queryData.data" inline>
                        <el-form-item style="margin-right: 1em;" prop="roleName">
                            <el-input v-model="queryData.data.roleName" clearable style="width: 200px;"
                                placeholder="请输入角色名称">
                                <template v-slot:prefix>
                                    <i class="iconfont icon-sousuo"></i>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getRolePage" type="primary"><i class="iconfont icon-sousuo"
                                    style="margin-right: 5px;"></i>搜索</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="table-box" style="height:calc(100% - 150px);">
            <el-table v-loading="tableLoading" @selection-change="doSelectionChange" :data="tableData" border height="100%">

                <el-table-column type="selection" width="55" />

                <el-table-column label="编号" align="center" width="80">
                    <template #default="scope">
                        {{ (queryData.currPage - 1) * queryData.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column prop="roleName" label="角色名称" align="center" width="220"></el-table-column>

                <el-table-column label="角色标识" align="center">
                    <template #default="scope">
                        <el-tag>{{ scope.row.roleLabel }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="是否启用" width="130" align="center">
                    <template #default="scope">
                        <el-switch v-model="scope.row.isDisabled" :active-value="0" :inactive-value="1"
                            @change="handleChange(scope.row)" active-color="#13ce66" inactive-color="#eaecf0">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" prop="createTime" align="center" width="300"></el-table-column>

                <el-table-column label="操作" align="center" width="300">
                    <template #default="scope">
                        <el-button @click="showRoleDialog(scope.row)" type="primary" plain size="small">
                            <i class="iconfont icon-bianji mr5"></i>
                            编辑
                        </el-button>
                        <el-button type="success" @click="$router.push({ path: `/sys/role/roleMenu/${scope.row.id}` })" plain
                            size="small">
                            菜单权限
                            <i class="iconfont icon-jinru ml5"></i>
                        </el-button>
                        <el-button @click="deleteRole(scope.row.id)" type="danger" plain size="small">
                            <i class="iconfont icon-lajixiang mr5"></i>
                            删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <Pagination :total-count="totalCount" :get-page="changeCurrentPage" />

        <el-dialog v-model="roleDialogVisible" :title="roleDialogTitle" :close-on-click-modal="false" width="500px">
            <el-form :model="roleDialogForm" :rules="roleRules" ref="roleDialogFormRef" size="default">
                <el-form-item label="角色名称" prop="roleName" label-width="80px">
                    <el-input v-model="roleDialogForm.roleName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="标识符" prop="roleLabel" label-width="80px">
                    <el-input v-model="roleDialogForm.roleLabel" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="角色描述" label-width="80px">
                    <el-input v-model="roleDialogForm.roleDesc" :rows="2" :autosize="{ minRows: 2, maxRows: 4 }"
                        type="textarea" placeholder="请输入..." />
                </el-form-item>
                <el-form-item label="排序值" label-width="80px">
                    <el-input-number v-model="roleDialogForm.orders"></el-input-number>
                </el-form-item>
                <el-form-item label="是否可用" label-width="80px">
                    <el-switch v-model="roleDialogForm.isDisabled" :active-value="0" :inactive-value="1"
                        active-color="#13ce66" inactive-color="#eaecf0">
                    </el-switch>
                    {{ roleDialogForm.isDisabled }}
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="roleDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="saveRole">确定</el-button>
                </span>
            </template>
        </el-dialog>

    </div>
</template>
<script>
export default {
    name: 'role'
}
</script>
<script setup>
import Pagination from '@/components/Pagination.vue'
import { queryRolePage, enableRole, createRole, updateRole, delRole, delBatchRole } from '@/api/roleApi'
import { ref, reactive, onMounted, computed } from 'vue'
import Messager from '@/utils/messager'
import MsgBoxer from '@/utils/msgBoxer'


// 表格 数据
let tableData = ref([])
let totalCount = ref(0)
const queryData = reactive({
    pageSize: 10,
    currPage: 1,
    data: {
        roleName: ''
    }
})
let tableLoading = ref(true)

// 获取角色数据
function getRolePage() {
    tableLoading.value = true
    queryRolePage(queryData).then(res => {
        tableLoading.value = false
        tableData.value = res.list
        totalCount.value = res.totalCount
    })
}

function changeCurrentPage(currPage) {
    queryData.currPage = currPage
    getRolePage()
}

onMounted(() => {
    getRolePage()
})


function handleChange(row) {
    enableRole({ roleId: row.id, isDisabled: row.isDisabled }).then(() => {
        if (row.isDisabled == 0) {
            Messager.ok(`启用成功`)
        } else {
            Messager.warn('该角色已被禁用')
        }
    })
}

// 角色表单
const roleDialogFormRef = ref(null)
const roleDialogVisible = ref(false)
const roleDialogTitle = ref('新增角色')
const roleDialogForm = ref({
    isDisabled: 0,
    orders: 1
})
const roleRules = {
    roleName: [
        { required: true, message: '角色名称不能为空', trigger: 'blur' }
    ],
    roleLabel: [
        { required: true, message: '角色标识符不能为空', trigger: 'blur' }
    ],
}

// 显示 角色表单 弹框
function showRoleDialog(roleData) {
    if (roleData && roleData.id) {
        // 编辑
        roleDialogVisible.value = true
        roleDialogForm.value = JSON.parse(JSON.stringify(roleData))
    } else {
        // 新增
        roleDialogForm.value = { isDisabled: 0, orders: 1 }
        roleDialogVisible.value = true
    }
}

// 保存 或 更新 角色
function saveRole() {

    roleDialogFormRef.value.validate((valid, fields) => {
        if (!valid) {
            return
        }
        if (roleDialogForm.value.id) {
            updateRole(roleDialogForm.value).then(res => {
                Messager.ok('更新角色成功')
                roleDialogVisible.value = false
                getRolePage()
            })
        } else {
            createRole(roleDialogForm.value).then(res => {
                Messager.ok('角色创建成功')
                roleDialogVisible.value = false
                getRolePage()
            })
        }
    })


}

// 删除角色
function deleteRole(roleId) {

    MsgBoxer.confirm('确认删除该角色吗?').then(() => {
        delRole(roleId).then(res => {
            Messager.ok('删除成功')
            getRolePage()
        })
    })

}

let selectedRoleIds = ref([])
function doSelectionChange(selection) {
    selectedRoleIds.value = []
    selection.forEach((row) => {
        selectedRoleIds.value.push(row.id)
    })
}

function deleteBatchRole() {
    MsgBoxer.confirm('是否批量删除这 ' + selectedRoleIds.value.length + ' 个角色').then(() => {
        delBatchRole(selectedRoleIds.value).then(() => {
            Messager.ok('批量删除成功')
            getRolePage()
        })
    })
}

// console.log('role setup');
</script>

<style lang="scss" scoped>
.role-operation {
    display: flex;
}

i.iconfont {
    margin-right: 2px;
}

.el-form--inline .el-form-item {
    margin-right: 0;
}



a.site-link {
    color: #409eff;
}

::v-deep .el-form-item-time .el-form-item__content {
    flex-wrap: nowrap;
}

.table-box i.iconfont {
    font-size: 14px;
}

::v-deep textarea {
    resize: none;
}
</style>
